<template>
  <div class="hello">
    <div>
    <me class="header"></me>
    <div class="food-container">
    <div class="foods">
      <ul class="food-type">
        <li class="food-classifg" v-for="(item,index) in foods">{{item.show_title}}</li>
      </ul>
    </div>
      <div class="foods-wrapper" ref="foodsWrapper">
        <div class="banner-container">
          <a class="banner-link" href="javascript:;">
            <img class="banner" src="https://antfresh-dev.oss-cn-hangzhou.aliyuncs.com/backend/2017/08/01/59804d9500da5.png?x-oss-process=image/resize,m_fill,w_750,h_180,limit_0" alt="横幅">
          </a>
        </div>
        <ul>
          <li v-for="item in foods" class="food-list food-list-hook">
            <h1 class="title">{{item.show_title}}</h1>
            <ul>
              <li v-for="food in item.items" class="food-item border-1px">
                <div class="icon">
                  <img :src="food.img_small">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <span class="desc">全家同款</span>
                  <div class="price">
                    <span class="now"><span class="small">¥</span>{{food.promotion_price}}</span><span class="old" v-show='food.price'>
                  ￥{{item.price}}
                 </span>
                    <div class="cartcontrol-wrapper">
                      <cartcontrols :food="food"></cartcontrols>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      </div>
    <shopcart class="cart-container"></shopcart>
    </div>
    <!--<detail class="food-detail-container"></detail>-->
  </div>
</template>

<script>
//  import head from '../address/address.vue'
  import me from '../address/address.vue'
  import cartcontrols from '../cartcontrol/cartcontrol.vue'
  import shopcart from '../shopcart/shopcart.vue'
  import detail from './detail/detail.vue'
  import data from '../../services/tsconfig.json'
export default {
  name: 'HelloWorld',
  data () {
    return {
      foods:''
    }
  },
  created() {
      this.foods = data.data.items
      console.log(data.data.items)
    data.data.items.forEach(function (i,item) {
    })
  },
  components: {
    me,
    cartcontrols,
    shopcart,
    detail
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "Goods.css";

</style>
